import React, { useState, useEffect } from 'react';
import './index.less';
import MyTabbar from '@/components/MyTabbar/MyTabbar';
import HomeHeader from './components/HomeHeader';
import { getHomeBanner, getCates, getItems } from '@/api/index'
import { Swiper, Grid, Avatar, SpinLoading   } from 'antd-mobile'
import Items from './components/Items';
import InfiniteScroll from 'react-infinite-scroll-component';
import { useNavigate } from 'umi';
export default function Page() {
  const navigate = useNavigate();
  // 首页banner获取
  const [banners, setBanners] = useState<any[]>([]);
  const fetchBanners = () => {
    getHomeBanner().then(res => {
      if (res.data.code === 0) {
        setBanners(res.data.data)
      }

    })
  }
  // 首页宫格分类数据
  const [cates, setCates] = useState<any[]>([]);
  const fetchCates = () => {
    getCates().then(res => {
      if (res.data.code === 0) {
        setCates(res.data.data)
      }
    })
  }
  // 处理商品列表
  const [page, setPage] = useState(1);
  const [items, setItems] = useState<any[]>([]);
  const fetchItems = () => {
    getItems({
      page,
      pageSize: 5
    }).then(res => {
      if (res.data.code === 0) {
        setItems([
          ...items,
          ...res.data.data.result
        ])
      }
      if (res.data.code === 700) {
        setHasMore(false)
      }

    })
  }
  // 上拉触底
  const reachBottom = () => {
    setPage(page+1) // 异步的
  }
  useEffect(() => {
    fetchItems();
  }, [page])
  // 上啦是否还有更多的数据
  const [hasMore, setHasMore] = useState(true);
  useEffect(() => {
    fetchBanners()
    fetchCates()
  }, [])
  return (
    <div className='home'>
      <HomeHeader />
      <div className="container-1">
        {/* 轮播 */}
        <Swiper loop>
          {
            banners.map(banner => (
              <Swiper.Item key={banner.id}>
                <img src={banner.picUrl} alt="" />
              </Swiper.Item>
            ))
          }
        </Swiper>
        {/* /轮播 */}
        {/* 宫格导航 */}
        <Grid columns={3}>
          {
            cates.map(cate => (
              <Grid.Item key={cate.id} onClick={
                () => {
                  navigate(`/itemLists?cateId=${cate.id}`)
                }
              }>
                <Avatar src={cate.icon} style={{ '--size': '50px' }} />
                <h5>{cate.name}</h5>
              </Grid.Item>
            ))
          }

        </Grid>
        {/* /宫格导航 */}
        {/* 商品列表 */}
        <InfiniteScroll
          dataLength={items.length}
          next={reachBottom}
          hasMore={hasMore}
          loader={
            <div style={{padding:20, display: 'flex', justifyContent:'center'}}>
              <SpinLoading color='primary' />
            </div>
          }
          endMessage={
            <p style={{ textAlign: 'center' }}>
              <b>---我也是有底线的---</b>
            </p>
          }>
          <Items items={items} />
        </InfiniteScroll>
        {/* /商品列表 */}
      </div>
      <MyTabbar />
    </div>
  );
}
